<template>
  <div>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="类型名称">
        <el-input v-model="queryInfo.typeName" placeholder="类型名称"></el-input>
      </el-form-item>
      <el-form-item label="自习室类型状态">
        <el-select v-model="queryInfo.dataStatus" placeholder="自习室类型状态">
          <el-option label="正常" value="true"></el-option>
          <el-option label="锁定" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">添加自习室类型</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="自习室类型ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="typeName"
          label="自习室类型名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="startPrice"
          label="初始价格">
      </el-table-column>
      <el-table-column
          prop="unitType"
          label="单位时间类型"  :formatter="getUnitName">
      </el-table-column>
      <el-table-column
          prop="unitPrice"
          label="单位价格">
      </el-table-column>
      <el-table-column
          prop="maxPrice"
          label="封顶价格">
      </el-table-column>
      <el-table-column
          prop="isDefault"
          label="是否默认">
        <template slot-scope="scope">
          {{scope.row.isDefault ===true?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column
          prop="dataStatus"
          label="自习室状态">
        <template slot-scope="scope">
          {{scope.row.dataStatus ===false?'锁定':'正常'}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
          <el-button
              size="mini"
              @click="handleEnable(scope.$index, scope.row)">{{scope.row.dataStatus ===true?'停用':'启用'}}</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: right;margin: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          layout="sizes, prev, pager, next"
          :total="dataCount">
      </el-pagination>
    </div>
    <roomType-add-dialog v-bind:dialog-form-visible=this.addDialog v-bind:type="this.addType" v-bind:room-type="this.nowRoomType" @change="getTableData"></roomType-add-dialog>
    <roomType-update-dialog v-bind:dialog-form-visible=this.updateDialog v-bind:type="this.updateType" v-bind:room-type="this.nowRoomType" @change="getTableData"></roomType-update-dialog>
  </div>
</template>

<script>


import {doDeleteRoomType, doGetAllUnitType, doGetRoomType, doUpdateRoomTypeStatus} from "@/api/roomType";
import roomTypeAddDialog from "@/components/dialog/roomTypeDialog.vue";
import roomTypeUpdateDialog from "@/components/dialog/roomTypeDialog.vue";
export default {
  name: "index",
  components: {roomTypeAddDialog,roomTypeUpdateDialog},
  data() {
    return {
      page:{pageIndex:1,pageSize:10},
      dataCount:10,
      queryInfo: {
        typeName: '',
        dataStatus: ''
      },
      tableData: [],
      addDialog:false,
      updateDialog:false,
      addType:'add',
      updateType:'update',
      nowRoomType:{},
      allUnitType:[]
    }
  },
  methods: {
    getTableData(){
      this.addDialog=false;
      this.updateDialog=false;
      const obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        queryInfo: this.queryInfo
      }
      doGetRoomType(obj).then(res=>{
        if (res.code===200){
          this.dataCount=res.data.total;
          this.tableData = res.data.records;
        }
      })
    },
    onSubmit() {
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.pageSize=val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageIndex=val;
      this.getTableData();
    },
    handleEdit(index, row){
      this.nowRoomType=row
      this.updateDialog=false;
      this.addDialog=false;
      this.updateDialog=true;
    },
    handleEnable(index, row){
      this.$confirm(row.dataStatus?'此操作将停用该类型, 是否继续?':'此操作将启用该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doUpdateRoomTypeStatus(row.id).then(res=>{
          if (res.code===200){
            this.getTableData();
          }
        })
      })
    },
    handleDelete(index, row){
      this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doDeleteRoomType(row.id).then(res=>{
          if (res.code===200){
            this.getTableData();
          }
        })
      })
    },
    handleAdd(){
      this.nowRoomType={startPrice:0.00}
      this.addDialog=false;
      this.updateDialog=false;
      this.addDialog=true;
    },
    getUnitName(row, column, cellValue, index){
      for (let i = 0; i < this.allUnitType.length; i++) {
          if (this.allUnitType[i].value==cellValue){
            return this.allUnitType[i].name;
          }
      }
    }
  },
  mounted() {
    this.getTableData();

   doGetAllUnitType().then(res=>{
      if (res.code===200){
        this.allUnitType = res.data;
      }
    })
  }

}
</script>

<style lang="less"  scoped>

</style>